<div class="container">

  <div class="row">
    <div class="col-md-12">
      <hr class="tall">
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <hr class="tall">
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">

      <div class="featured-boxes">
        <div class="row">
          <div class="col-md-12">
            <div class="featured-box featured-box-primary align-left mt-sm">
              <div class="box-content">
                <div>
                  <table class="shop_table cart">
                    <thead>
                    <tr>
                      <th class="product-remove">
                        &nbsp;
                      </th>
                      <th class="product-thumbnail">
                        &nbsp;
                      </th>
                      <th class="product-name">
                        商品名称
                      </th>
                      <th class="product-price">
                        商品价格
                      </th>
                      <th class="product-quantity">
                        数量
                      </th>
                      <th class="product-subtotal">
                        总价
                      </th>
                      <th>
                        操作
                      </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="cart_table_item" *ngFor="let cartProduct of cartProductList;let i = index;">
                      <td>
                        <div>
                          <label>
                            <input type="checkbox" class="checkbox" (change)="checkedChange(cartProduct.id,false)" checked="checked" *ngIf="cartProduct.productChecked">
                            <input type="checkbox" class="checkbox" (change)="checkedChange(cartProduct.id,true)" *ngIf="!cartProduct.productChecked">
                          </label>
                        </div>
                      </td>
                      <td class="product-thumbnail">
                        <a href="javaScript:">
                          <img style="height: 70px;width: 120px" alt="商品图片" class="img-responsive" [src]="cartProduct.productMainImage">
                        </a>
                      </td>
                      <td class="product-name">
                        <a href="javaScript:">{{cartProduct.productName}}</a>
                      </td>
                      <td class="product-price">
                        <span class="amount">￥{{cartProduct.productPrice}}</span>
                      </td>
                      <td class="product-quantity">
                        <form enctype="multipart/form-data" method="post" class="cart">
                          <div class="quantity">
                            <input type="button" (click)="sub(cartProduct.id,cartProduct.quantity)" class="minus" value="-">
                            <input type="text" class="input-text qty text" id="qty{{i}}" [ngModelOptions]="{standalone: true}" [(ngModel)]="cartProduct.quantity" (change)="quantityChange(i,cartProduct.id)">
                            <input type="button" (click)="add(cartProduct.id,cartProduct.quantity)" class="plus" value="+">
                          </div>
                        </form>
                      </td>
                      <td class="product-subtotal">
                        <span class="amount">￥{{cartProduct.productTotalPrice}}</span>
                      </td>
                      <td>
                        <a href="javaScript:" (click)="remove(cartProduct.id)"><span class="glyphicon glyphicon-trash"></span></a>
                      </td>
                    </tr>
                    <tr>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td colspan="2"><h4>小计：￥{{cartTotalPrice}}</h4></td>
                      <td colspan="3">
                        <div class="actions-continue">
                          <button (click)="figure()" class="btn btn-lg btn-secondary">去结算</button>
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>

</div>
